<template>
  <div style="height: 100%;">
    <div class="el-card__header" style="padding: 5px 0;display: flex;" ref="header" v-if="type !== 'iframe'">
      <slot name="order"></slot>
      <div v-if="pageTotalNum > 1 && type !== 'iframe'"  style="flex: 1;text-align:right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleIndexChange"
          :current-page.sync="pageNum"
          :page-size="1"
          :hide-on-single-page="true"
          layout="prev, pager, next, jumper"
          :total="pageTotalNum"
        >
        </el-pagination>
      </div>
    </div>
    <template v-if="src && url&&type !== 'iframe'">
      <div style="max-height: 70vh; overflow-y: auto" v-if="url">
        <pdf
          :page="pageNum"
          :src="url"
          @progress="loadedRatio = $event"
          @num-pages="pageTotalNum = $event"
        ></pdf>
      </div>
    </template>
    <template v-if="src && type == 'iframe'">
      <iframe
        :style="iframeStyle"
        v-if="src"
        :src="src"
        frameborder="0"
      ></iframe>
    </template>
  </div>
</template>
<script>
import pdf from "vue-pdf";
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
export default {
  name: "Pdf",
  components: {
    pdf,
  },
  props: ["src", "type"],
  watch: {
    src: {
      handler() {
        console.log("src", this,this.$refs.header , this.$refs.header && this.$refs.header.offsetHeight);
        if (this.src && this.type !== "iframe") {
          this.url = "";
          this.url = pdf.createLoadingTask({
            url: this.src,
            CMapReaderFactory,
          });
          console.log("url", this.url);
        } else (this.url = ""), (this.pageTotalNum = 1);
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    iframeStyle() {
      let style = `min-height: 50vh; width: 100%;`;
      if (this.$refs.header && this.$refs.header.offsetHeight) {
        return style + `height:calc(100% - 50px)`;
      } else return style + `height:calc(100% - 11px)`;
    },
  },
  data() {
    return {
      url: "",
      // "http://yayu.i234.me:9002//uploads/20210128/2ed0bd633dcb3d8cc1da1494682c0e9b.pdf",
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    if (this.src) {
      this.url = pdf.createLoadingTask({ url: this.src, CMapReaderFactory });
    }
  },
  methods: {
    //切换每页显示的数量
    handleSizeChange(size) {
      // console.log(size);
    },
    handleIndexChange(current) {
      // console.log(current);

      // this.tableOptions.pagination.pageIndex = current;
      // this.$emit("handleChangePage", {
      //   pageIndex: current,
      //   pageSize: this.tableOptions.pagination.pageSize,
      // });
    },
    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },

    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
  },
};
</script>
<style  >
</style>
